<template>
  <div class="LayoutDesign">
    <el-row>
      <el-col :span="24">
        <!-- 搜索部分 -->
        <el-form :inline="true" :model="search">
          <el-form-item :label="$t('layoutName')">
            <el-input v-model="search.name" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="doSearch"
            >{{ $t("search") }}</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-button
          v-btnPermission:add
          type="primary"
          icon="el-icon-plus"
          @click="switchHandle('add')"
        >{{ $t("add") }}</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-document-copy"
          @click="copyItem"
        >{{ $t("copy") }}</el-button
        >
        <el-button
          v-btnPermission:edit
          :disabled="UpdateDisabled"
          type="primary"
          icon="el-icon-edit"
          @click="switchHandle('modify')"
        >{{ $t("modify") }}</el-button
        >
        <el-button
          v-btnPermission:delete
          :disabled="DeleteDisabled"
          type="danger"
          icon="el-icon-delete"
          @click="switchHandle('del')"
        >{{ $t("delete") }}</el-button
        >
      </el-col>
    </el-row>
    <!-- 主体部分 -->
    <el-card class="box-card">
      <!-- 表单部分 -->
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <!--分页组件-->
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 弹窗组件 -->
    <myDialog
      ref="myDialog"
      :form="form"
      :title="title"
      :is-disabled="isDisabled"
      @doSave="doSave"
      @closeDialog="closeDialog"
    />
    <!-- 复制弹窗组件 -->
    <copyDialog ref="copyDialog" @doSave="doSave" />
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import myDialog from './components/Dialog'
import copyDialog from './components/copyDialog'
import layoutApi from '@/api/production/layoutDesign'
import { clearNull } from '@/utils/myTools'
import { tips } from '@/utils/notification'
export default {
  name: 'EqpLayout',
  components: { myDialog, copyDialog },
  mixins: [mySetting],
  data() {
    return {
      multipleSelection: [],
      UpdateDisabled: true,
      DeleteDisabled: true,
      form: {},
      title: '', // 弹窗标题
      search: {},
      isDisabled: false, // 是否禁用表单内容
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: '序号', type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        {
          prop: 'layoutName',
          label: this.$t('layoutName'),
          templete: (_scope) => {
            return (
              <el-link
                underline={false}
                type='primary'
                vOnclick={this.$router.push({
                  name: 'EquipmentManage',
                  params: { LayoutId: _scope.row.id }
                })}
              >{ _scope.row.layoutName }</el-link>
            )
          }
        },
        {
          prop: 'areaName',
          label: this.$t('areaName')
        },
        {
          prop: 'description',
          label: this.$t('description')
        }
      ],
      tableLoading: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    switchHandle(val) {
      switch (val) {
        case 'add':
          this.handleClickAdd()
          break
        case 'del':
          this.handleDel()
          break
        case 'modify':
          this.modify()
          break
        default:
          break
      }
    },
    // 新增数据
    handleClickAdd() {
      this.title = this.$t('addLayout')
      this.$refs.myDialog.openDialog()
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => {
          return ele.id
        })
        layoutApi.deleteList({ ids: ids }).then((res) => {
          const s = {
            message: this.$t(res.message),
            code: this.$t(res.code)
          }
          tips(s)
          this.setOnePage()
          this.initList()
        })
      })
    },
    // 修改数据
    modify() {
      this.title = this.$t('modifyLayout')
      this.isDisabled = false
      layoutApi.detail({ id: this.multipleSelection[0].id }).then((res) => {
        this.form = res.data
      })
      this.$refs.myDialog.openDialog()
    },
    // 复制布局
    copyItem() {
      this.$refs.copyDialog.openDialog()
    },
    // 切换分页
    getList(val) {
      this.tableLoading = true
      this.listQuery = val
      this.initList()
    },
    // 初始化列表
    initList() {
      let obj = {
        ...this.listQuery,
        ...this.search
      }
      obj = clearNull(obj)
      layoutApi.getList(obj).then((res) => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 确认新增
    doSave() {
      this.listQuery.page = 1
      this.search = {}
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 关闭弹窗清空数据
    closeDialog() {
      this.isDisabled = false
      this.form = {}
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
</style>
<style lang="scss" scoped>
.el-row {
  min-height: 46px;
  padding: 10px;
  background-color: #fff;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-collapse-transition {
  position: relative;
  .el-date-picker {
    position: absolute;
    top: 50px;
  }
}
.el-form-item {
  margin-bottom: 0;
}
</style>
